<template>
    <div class="detail-container">
        <el-form
            ref="ruleForm"
            :model="userInfo"
            :rules="rules"
            label-width="200px"
        >
            <el-form-item
                label="姓名："
                prop="username"
            >
                <el-input
                    v-model="userInfo.username"
                    size="mini"
                />
            </el-form-item>
            <el-form-item
                label="工号："
                prop="workNumber"
            >
                <el-input
                    v-model="userInfo.workNumber"
                    :disabled="isEdit"
                />
            </el-form-item>
            <el-form-item
                label="手机："
                prop="mobile"
            >
                <el-input
                    v-model="userInfo.mobile"
                    :disabled="isEdit"
                />
            </el-form-item>
            <el-form-item
                label="部门："
                prop="departmentId"
            >
                <departmentComVue
                    v-model="userInfo.departmentId"
                    :a="userInfo.departmentId"
                />
            </el-form-item>
            <el-form-item
                label="聘用形式："
                prop="formOfEmployment"
            >
                <el-select
                    v-model="userInfo.formOfEmployment"
                    clearable
                    placeholder="请选择"
                >
                    <el-option
                        label="正式"
                        :value="1"
                    />
                    <el-option
                        label="非正式"
                        :value="2"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="入职时间："
                prop="timeOfEntry"
            >
                <el-date-picker
                    v-model="userInfo.timeOfEntry"
                    format="yyyy年MM测试dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                />
            </el-form-item>
            <el-form-item
                label="转正时间："
                prop="correctionTime"
            >
                <el-date-picker
                    v-model="userInfo.correctionTime"
                    format="yyyy年MM测试dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                />
            </el-form-item>
            <el-form-item label="员工头像：">
                <uploadImageVue v-model="userInfo.staffPhoto" />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="submitForm"
                    >保存更新</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addEmployeeRequest, getEmployeeInfoRequest, updateEmployeeInfoRequest } from '@/api/employee'
import departmentComVue from './components/departmentCom.vue'
import uploadImageVue from './components/upload-image.vue'

export default {
    name: 'EmployeeDetail',
    components: {
        departmentComVue,
        uploadImageVue
    },
    data() {
        const that = this
        const validateCorrectionTime = function (rule, value, callback) {
            console.log(that.userInfo.timeOfEntry, value)
            // 什么情况下，校验报错。 入职时间 10号 > 转正时间  1号
            // 时间的比较，急用时间戳
            // 时间戳获取： +new Date()  Date.now()  new Date().getTime()
            if (+new Date(that.userInfo.timeOfEntry) > +new Date(value)) {
                callback(new Error('转正时间不能早于入职时间'))
                // return
            } else {
                callback()
            }

            // 工作里面，一般可以合理的使用return 去简化if...else 结构
            // 这个校验函数，会执行两遍，即使我们将callback保证只调用一次。 课后去想 这个校验函数的执行时机是什么？
        }

        return {
            userInfo: {
                mobile: '',
                username: '',
                workNumber: '',
                departmentId: 2750,
                formOfEmployment: 1,
                timeOfEntry: '',
                correctionTime: '',
                staffPhoto: 'https://cdn.apifox.cn/app/project-icon/custom/20230108/5c546ccd-c364-4654-b0fc-a13927e3148a.png'
            },
            rules: {
                // 校验规则，尽量从我们自己的项目中 拿过来，不要从零写，或者去看官网，有点慢
                // 校验的步骤， 页面el-form上绑定 :model :rules  --> 在组件el-form-item上面 绑定 prop ，控件上绑定js属性  ---> 在js里面定义rules规则
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3|5|6|7|8|9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 4, message: '姓名位数在1-4位', trigger: 'blur' }
                ],
                departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'change' }],
                timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
                correctionTime: [
                    { required: true, message: '请选择转正时间', trigger: 'change' },
                    { validator: validateCorrectionTime, trigger: 'change' }
                ]
            },
            value: []
        }
    },
    computed: {
        // ! 非  取反的意思   !0  !''
        // !! 将任意的数据类型 换行为 布尔值  !!0 == false
        isEdit() {
            return !!this.$route.params.id
        }
        // isEdit: {
        //   get() {},
        //   set() {}
        // }
    },
    created() {
        // 这个页面是新增 和编辑 共用的页面，只有编辑的时候才需要根据id发请求，获取当前页面的数据
        // 用什么来判断当前页面状态是 编辑 还是 新增  this.$route.params
        // console.log(this.$route.params)
        if (this.$route.params.id) {
            this.getEmployeeInfo()
        }
    },
    methods: {
        async getEmployeeInfo() {
            const res = await getEmployeeInfoRequest(this.$route.params.id)
            this.userInfo = res.data
        },
        submitForm() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    try {
                        if (this.isEdit) {
                            await updateEmployeeInfoRequest(this.userInfo)
                        } else {
                            await addEmployeeRequest(this.userInfo)
                        }
                        this.$router.back()
                        // this.$router.go(-1)
                        // this.$router.push('/employee')
                    } catch (err) {
                        this.$message.error('添加员工失败')
                    }
                }
            })
        }
    }
}
</script>

<style>
.detail-container .el-input {
    width: 400px;
}
.detail-container .el-input__inner {
    height: 28px;
    line-height: 28px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style lang="scss" scoped>
// vue scss scope 加深度选择器
.detail-container {
    margin: 20px;
    // .el-input {
    //   width: 400px;
    // }
    // ::v-deep .el-input  {
    //   width: 400px;
    //   font-size: 20px;
    // }
}
</style>
